<template>
    <section class="wrapper">
      <myHeader class="header" :obj="myObj" @events="events(eventnun)"></myHeader>
      <main>
        <subject>
          <span slot="title">{{listDate.Title}}</span>
          <span slot="type">一对一约见</span>
          <span slot="money" v-if="listDate.Money">{{listDate.Money.toFixed(2)}}</span>
        </subject>
        <div class="myCourse_0310">
          <myProgress :level="level"></myProgress>
        </div>
        <div class="waitWrap_0310">
          <div class="waitIcon_0310">
            <i class="Iicon_0310"></i>
          </div>
          <p class="waitText_0310">{{listDate.Enddo?"订单已关闭":"等待行家审核"}}</p>
        </div>
        <div class="orderWrap">
          <div class="orderContent">
            <h2>订单号：{{listDate.AppointmentOrderNo}}</h2>
            <p>订单金额：￥{{listDate.Money.toFixed(2)}}</p>
            <p>见面地点：{{listDate.Location?listDate.Location:"暂未确定"}}</p>
            <p>创建时间：{{listDate.CreateTime?listDate.CreateTime:"暂未确定"}}</p>
            <p>约见时间：{{listDate.SMeetUpTime?listDate.SMeetUpTime:"暂未确定"}} - {{listDate.EMeetUpTime?listDate.EMeetUpTime:"暂未确定"}}</p>
          </div>
          <div class="orderRemark">
            <span>备注：</span>
            <p>{{listDate.Describe}}</p>
          </div>
        </div>
        <div class="service">
          <ul>
            <li>
              <div class="faceWrap">
                <i :style="{background:'url('+ listDate.ExpertHeadUrl + ') no-repeat center center', backgroundSize:'cover'}"></i>
                <p>{{listDate.ExpertName}}</p>
              </div>
              <div class="fontWrap">
                <span>被约者</span>
                <h2>{{listDate.Title}}</h2>
                <h4>{{listDate.Describe}}</h4>
                <h4>电话：{{listDate.Phone}}</h4>
              </div>
            </li>
            <li>
              <div class="faceWrap">
                <i :style="{background:'url('+ listDate.HeadUrl + ') no-repeat center center', backgroundSize:'cover'}"></i>
              </div>
              <div class="fontWrap">
                <span>约见者</span>
                <h3>{{listDate.Name}}</h3>
                <h3>电话：{{listDate.AppointmentPhone}}</h3>
              </div>
            </li>
          </ul>
        </div>
        <myButton class="marginT_1 cancelBtn" @sendDate="cancel(orderno)" v-if="!listDate.Enddo" >取消订单</myButton> 
      </main>
    </section>
</template>
<script>
import myHeader from './base/myHeader';
import myButton from './base/myButton';
import myProgress from './base/myProgress';
import subject from './base/subject';
import hgjSkip from '../assets/js/hgjSkip';
import API from '../assets/js/asktoses';
import { fetch,zdUrl,chatAppId } from '../assets/api';
export default {
  
  data () {
    return {
      myObj: {
        type: 2,
        text: '约见详情'
      },
      level: 1,
      orderno:this.$route.query.AppointmentOrderNo,
      eventnun:this.$route.query.num,
      loginData:null,
      listDate:{}
    }
  },
  created() {
    hgjSkip.skip().then(res =>{
      this.loginData = res;
      this.eventnun = this.eventnun?this.eventnun:1;
      this.experinformation();
    });
    
  },
  methods: {
    events(i) {
      if(i == 2) {
        history.back();
      }else{
        history.go(-4);
      }
    },
    //获取行家信息
    async experinformation(){
      const res = await fetch(API.getOrderList,{
        ...this.loginData[1],
        AppointmentOrderNo:this.$route.query.AppointmentOrderNo,
      });
      this.listDate = res.Result;
      console.log(this.listDate)
     
    },
    //取消订单
    cancel(tOrderNo){
      this.$router.push({path:"abolish",query:{AppointmentOrderNo:tOrderNo}})
    },
  },
  components: {
    myHeader,
    myProgress,
    myButton,
    subject
  }
}

</script>
<style lang="less">
  .wrapper {
    width: 3.75rem;
    main {
      width: 3.75rem;
      height: 100%;
      padding-top: .44rem;
      position: absolute;
      top: 0;
      left: 0;
      overflow-y: auto;
      box-sizing: border-box;
      .marginT_1 {
        margin-top: .2rem; 
        margin-bottom: .5rem; 
      }
      .cancelBtn{
        background: #B3B3B6 !important;
      }
      .myCourse_0310 {
        margin-bottom: .1rem;
      }
      .waitWrap_0310 {
        height: 1.05rem;
        background: white;
        margin-bottom: .07rem;
        .waitIcon_0310 {
          padding: .13rem 0;
          .Iicon_0310 {
            display: block;
            width: .58rem;
            height: .58rem;
            margin: 0 auto;
            background: url('../assets/img/expert/icon_time@3x.png') center center;
            background-size: cover;
            background-repeat: no-repeat;
          }
        }
        .waitText_0310 {
          font-size: .12rem;
          color: #39393D;
          text-align: center;
        }

      }
      .orderWrap{
        width: 100%;
        background: #fff;
        margin-bottom: .07rem;
        .orderContent{
          padding: .15rem .1rem;
          border-bottom: 1px solid #ddd;
          h2{
            color: #333;
            font-size: 0.16rem;
            margin-bottom: 0.12rem;
          }
          p{
            color: #B3B3B6;
            font-size: 0.14rem;
            margin-bottom: 0.12rem;
            &:nth-last-of-type(1){
              margin-bottom: 0;
            }
          }
        }
        .orderRemark{
          padding: .15rem .1rem;
          display: flex;
          font-size: .14rem;
          color: #B3B3B6;
          span{
            display: inline-block;
            width: .5rem;
          }
          p{
            line-height: 1.5;
          }
        }
      }
      .service{
        li{
          padding: .13rem .1rem;
          background: #fff;
          margin-top: .07rem;
          display: flex;
          position: relative;
          &:nth-of-type(1){
            margin-top: 0;
          }
          span{
            position: absolute;
            top: .13rem;
            right: .1rem;
            font-size: .14rem;
            color: #B3B3B6;
          }
          .faceWrap{
            margin-right: .1rem;
            i{
              display: inline-block;
              height: .6rem;
              width: .6rem;
              border-radius: 50%;
            }
            p{
              text-align: center;
              margin-top: .05rem;
              color: #333;
            }
            h2{
              font-size: .14rem;
              color: #333;
            }
          }
          .fontWrap{
            h2{
              font-size: .16rem;
              color: #333;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp:1;
              overflow: hidden;
              margin-top: .02rem;
            }
            h3{
              font-size: .14rem;
              color: #333;
              margin: .1rem 0 0;
            }
            h4{
              font-size: .14rem;
              color: #B3B3B6;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp:1;
              overflow: hidden;
              margin: .1rem 0 0;
            }
          }
        }
      }
    }
  }
</style>
